<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    protected void Page_Load(object sender, EventArgs e)
    {

    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>TinyGet! - Shorten your links</title>
    
    
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/jquery-1.3.2.js" type="text/javascript"></script>
        
</head>

<body>

<script type="text/javascript">
//clears the url box on focus and restores default text on off click if empty
    function textChange(elementID, defaultText) {
        var element = document.getElementById(elementID);

        if (element.value == defaultText) {
            element.value = "";
        }
        else if (element.value == "") {
            element.value = defaultText;
        }

    }

    function Create() {
        var url = document.getElementById("longUrl").value;
        var custom = document.getElementById("custom").value;

        if (url == "Paste your link here") {
            $("#longUrl").val("Please insert a url before clicking shorten!");
            return;
        }

        var data = { Url: url, Custom: custom };
        $.post("/Home/Create", data, function(json, textStatus) {
            $("#shortUrl").val(json.data);
            $("#outputBox").slideDown(500);
        }, "json");


    }

    $(document).ready(function() {
        $("#customInput").slideUp(1); //Slide custominput box up at the start
        $("#outputBox").slideUp(1);

            $("#customBox").click(function() {//slide the custom input box up and down
                $("#customInput").slideToggle("slow");
            });


    });

</script>


        <center>
                <p><img alt="TinyGet" src="../../Content/tinygetlogov1.jpg" style="width: 315px; height: 114px" /></p></center>
    <div id="entryBox">
            <span>TinyGet <em>(beta)</em></span><br />
            <span>Reduce your long links to smaller ones to keep them more memorable....<br /></span>
            
            <input id="longUrl" class="textInput" type="text" value="Paste your link here" onfocus="textChange('longUrl', 'Paste your link here');" onblur="textChange('longUrl', 'Paste your link here');" name="longUrl"/>
            <input type="button" id="shorten" value="shorten" onclick="Create();" />
            <div id="customBox">Optional Custom Name</div>
            <div id="customInput"><input id="custom" type="text" /></div>
            <br />
            <div id="outputBox"><input id="shortUrl" class="textOutput" type="text" name="shortUrl"/><button id="Copy">Copy</button></div>
    </div>
        
</body>
</html>
